<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">【题型】：{{ QuestionList.questionType | questionTypeFilter }}</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">【编号】：{{ QuestionList.id }}</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">【难度】：{{ QuestionList.difficulty | difficultyFilter }}</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">【标签】：{{ QuestionList.tags }}</div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">【学科】：{{ QuestionList.subjectName }}</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">【目录】：{{ QuestionList.directoryName }}</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">【方向】：{{ QuestionList.direction }}</div></el-col
      >
    </el-row>
    <hr />
    <div>
      <p>【题干】:<span v-html="QuestionList.question"></span></p>
      <p v-show="QuestionList.questionType !== '3'">选项:（以下选中的选项为正确值）</p>

      <p v-show="QuestionList.questionType !== '3'" v-for="(item, index) in QuestionList.options" :key="index">
        {{ item.code }}:
        <el-radio v-if="QuestionList.questionType === '1'" :value="item.isRight === 0" :label="item.isRight === '1'">{{ item.title }}</el-radio>
        <el-checkbox v-else :value="item.isRight === 0" :label="item.isRight === '2'">{{ item.title }}</el-checkbox>
      </p>
    </div>
    <hr />

    【参考答案】:&nbsp;&nbsp;<el-button type="danger" size="mini" @click="isShowVide = !isShowVide">视频答案预览</el-button>
    <div class="video" v-show="isShowVide">
      <video ref="video" controls :src="QuestionList.videoURL"></video>
    </div>
    <hr />
    <div>【答案解析】:<span v-if="QuestionList.answer" v-html="QuestionList.answer">无</span></div>
    <hr />
    <div>【题目备注】：<span v-if="QuestionList.remarks" v-html="QuestionList.remarks"></span>无</div>
    <div></div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  name: 'questionsPreview',
  data() {
    return {
      QuestionList: [],
      isShowVide: false
    }
  },
  props: {
    questionID: {
      type: [Number, String, Object],
      required: true
    }
  },
  filters: {
    difficultyFilter(value) {
      if (value) return difficulty.find((item) => item.value === +value).label
    },
    questionTypeFilter(value) {
      if (value) return questionType.find((item) => item.value === +value).label + '题'
    }
  },
  created() {
    this.getQuestion(this.questionID)
  },
  methods: {
    async getQuestion(id) {
      // console.log(id)
      const res = await detail({ id })
      // console.log(data);
      // console.log(res.data);
      this.QuestionList = res.data
      // console.log(this.QuestionList)
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .el-col {
    padding: 10px 0;
  }
  .video {
    width: 400px;
    height: 300px;
    margin-top: 10px;
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
